<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@include file="/WEB-INF/includes/css-file.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
<%
    // 设置导航条上的显示
    pageContext.setAttribute("navInfo", "许可维护");
    // 设置点击高亮效果
    pageContext.setAttribute("curUrl", "permission/menu/list");
%>
<%@include file="/WEB-INF/includes/navbar.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/includes/sidebar_menu.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="saveModalLabel">添加菜单</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addNameInput">菜单名称</label>
                    <input type="text" class="form-control" id="addNameInput" name="name" placeholder="请输入菜单名称">
                    <input type="hidden" name="pid">
                </div>
                <div class="form-group">
                    <label for="url">菜单URL</label>
                    <input type="text" class="form-control" id="url" name="url" placeholder="请输入菜单名称">
                </div>
                <div class="form-group">
                    <label for="icon">菜单图标</label>
                    <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单名称">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="updateModalLabel">添加菜单</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="updateNameInput">菜单名称</label>
                    <input type="text" class="form-control" id="updateNameInput" name="name" placeholder="请输入菜单名称">
                    <input type="hidden" name="id">
                </div>
                <div class="form-group">
                    <label for="updateNameInput">菜单URL</label>
                    <input type="text" class="form-control" id="updateURlInput" name="url" placeholder="请输入菜单URL">
                </div>
                <div class="form-group">
                    <label for="updateIconInput">菜单图标</label>
                    <input type="text" class="form-control" id="updateIconInput" name="icon" placeholder="请输入菜单图标">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">修改</button>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/includes/js-file.jsp" %>
<%@include file="/WEB-INF/includes/common-js.jsp" %>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        initMenuTree();
    });

    function initMenuTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "pid",
                },
                key: {
                    url: "xUrl"
                }
            },
            view: {
                showIcon: false,
                selectedMulti: false,
                addDiyDom: function (treeId, treeNode) {
                    $("#" + treeNode.tId + "_ico").removeClass();
                    $("#" + treeNode.tId + "_span").before("<span class='" + treeNode.icon + "'></span>");
                },
                addHoverDom: function (treeId, treeNode) {//treeNode节点->TPermission对象
                    // console.log(treeNode);
                    var aObj = $("#" + treeNode.tId + "_a");
                    // aObj.attr("href", "javascript:;");
                    if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0)
                        return;
                    var s = '<span id="btnGroup' + treeNode.tId + '">';
                    if (treeNode.level == 0) {//根节点
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn(' + treeNode.id + ')" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                    } else if (treeNode.level == 1) {//分支节点
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn((' + treeNode.id + '))" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                        if (treeNode.children == null) {
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn((' + treeNode.id + '))" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                        }
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn((' + treeNode.id + '))" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                    } else if (treeNode.level == 2) {//叶子节点
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn((' + treeNode.id + '))" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn((' + treeNode.id + '))">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                    }

                    s += '</span>';
                    aObj.after(s);
                },
                removeHoverDom: function (treeId, treeNode) {
                    $("#btnGroup" + treeNode.tId).remove();
                },
            }
        };
        $.getJSON("${ctp}/permission/menu/getAllMenu", function (zNodes) {
            zNodes.push({id: 0, name: "系统菜单", icon: "glyphicon glyphicon-wrench"});
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            zTreeObj.expandAll(true);
        })
    }

    function addBtn(pid) {
        $("#addModal").modal({
            show: true,
            backdrop: 'static',
            keyboard: false,
        });
        $("#addModal input[name='pid']").val(pid);
    }

    $("#saveBtn").click(function () {
        var pid = $("#addModal input[name='pid']").val();
        var name = $("#addModal input[name='name']").val();
        var icon = $("#addModal input[name='icon']").val();
        var url = $("#addModal input[name='url']").val();
        $.post("${ctp}/permission/menu/addMenu", {pid: pid, name: name, icon: icon, url: url}, function (result) {
            if ("ok" == result) {
                layer.msg("保存成功！", {time: 1000}, function () {
                    $("#addModal").modal("hide");
                    $("#addModal input[name = 'pid']").val();
                    $("#addModal input[name = 'name']").val();
                    $("#addModal input[name = 'icon']").val();
                    $("#addModal input[name = 'url']").val();
                    initMenuTree();
                });
            } else {
                layer.msg("保存失败！");
            }
        });
    })

    function updateBtn(id) {
        $("#updateModal").modal({
            show: true,
            backdrop: 'static',
            keyboard: false,
        });
        <%--$.get("${ctp}/permission/menu/getMenuById", {id: id}, function (result) {--%>
        <%--    $("#updateModal input[name = 'id']").val(result.id);--%>
        <%--    $("#updateModal input[name = 'name']").val(result.name);--%>
        <%--    $("#updateModal input[name = 'url']").val(result.url);--%>
        <%--    $("#updateModal input[name = 'icon']").val(result.icon);--%>
        <%--})--%>
        var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var currentNode = zTreeObj.getNodeByParam("id", id);
        $("#updateModal input[name = 'id']").val(currentNode.id);
        $("#updateModal input[name = 'name']").val(currentNode.name);
        $("#updateModal input[name = 'url']").val(currentNode.url);
        $("#updateModal input[name = 'icon']").val(currentNode.icon);
    }

    $("#updateBtn").click(function () {
        var id = $("#updateModal input[name = 'id']").val();
        var name = $("#updateModal input[name = 'name']").val();
        var url = $("#updateModal input[name = 'url']").val();
        var icon = $("#updateModal input[name = 'icon']").val();
        $.post("${ctp}/permission/menu/updateMenu", {
            id: id,
            name: name,
            url: url,
            icon: icon,
        }, function (result) {
            if ("ok" == result) {
                layer.msg("更新成功！", {time: 1000}, function () {
                    $("#updateModal").modal("hide");
                    initMenuTree();
                })

            } else {
                layer.msg("更新失败！");
            }
        })
    })

    function deleteBtn(id) {
        layer.confirm("确定要删除吗？", {btn: ['确定', '取消']}, function (index) {
            $.get("${ctp}/permission/menu/deleteMenuById", {id: id}, function (result) {
                if ("ok" == result) {
                    layer.msg("删除成功！", {time: 1000}, function () {
                        initMenuTree();
                    });
                } else {
                    layer.msg("删除失败！");
                }
            });
            layer.close(index);
        }, function (index) {
            layer.close(index);
        });
    }
</script>
</body>
</html>
